import React from 'react';
import { useTermsI18n } from '../Terms/useTermsI18n';

const ContentRemoval: React.FC = () => {
    const { data, loading, error } = useTermsI18n('Terms_of_ContentRemoval');

    if (loading) {
        return (
            <div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-8 flex items-center justify-center">
                <div className="text-gray-600 dark:text-gray-400">Loading...</div>
            </div>
        );
    }

    if (error || !data) {
        return (
            <div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-8 flex items-center justify-center">
                <div className="text-red-600 dark:text-red-400">{error || 'Failed to load content removal policy'}</div>
            </div>
        );
    }

    return (
        <div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-8">
            <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
                <div className="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-8">
                    <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-6">{data.title}</h1>

                    <p className="text-sm text-gray-600 dark:text-gray-400 mb-8">{data.lastModified}</p>

                    <div className="space-y-8">
                        {Object.entries(data.sections).map(([key, section]) => (
                            <section key={key} className="border-b border-gray-200 dark:border-gray-700 pb-6 last:border-b-0">
                                <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">{section.title}</h2>
                                <div className="text-gray-700 dark:text-gray-300 leading-relaxed whitespace-pre-wrap">
                                    {section.content}
                                </div>
                            </section>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default ContentRemoval;